<template>
  <div class="group">
    <header>
      资讯管理
      <div class="search">
        <p>
          搜索:
          <input @input="search(value)" v-model="value" />
        </p>
        &emsp;
        <div class="select">
          状态:
          <select v-model="select5" @change="area(select5)">
            <option v-for="(item,index) in option5" :key="index">{{item.text}}</option>
          </select>
        </div>
        <!-- <li>
          <select v-model="select" @change="area(select)">
            <option v-for="(item,index) in option" :key="index">{{item.text}}</option>
          </select>
        </li>
        <li>
          <select v-model="select1">
            <option v-for="(item,index) in option1" :key="index">{{item}}</option>
          </select>
        </li>
        <li>
          <select v-model="select2" @change="area2(select2)">
            <option v-for="(item,index) in option2" :key="index">{{item.text}}</option>
          </select>
        </li> -->
        &emsp;
        <v-distpicker class="areas" @selected="city"></v-distpicker>
        <button>查询</button>
      </div>
    </header>
    <main>
      <!-- <div class="search">
        <p>
          搜索:
          <input />
        </p>
        <div class="select">
          状态:
          <select @change="value1">
            <option value v-for="(item,index) in option3" :key="index">{{item.text}}</option>
          </select>
        </div>
        <li>
          <select v-model="select" @change="area(select)">
            <option v-for="(item,index) in option" :key="index">{{item.text}}</option>
          </select>
        </li>
        <li>
          <select v-model="select1">
            <option v-for="(item,index) in option1" :key="index">{{item}}</option>
          </select>
        </li>
        <li>
          <select v-model="select2" @change="area2(select2)">
            <option v-for="(item,index) in option2" :key="index">{{item.text}}</option>
          </select>
        </li>
        <button>查询</button>
      </div>-->
      <div class="table">
        <table border="1">
          <thead>
            <tr>
              <th>序号</th>
              <th>图片</th>
              <th>楼盘名称</th>
              <th>楼盘地址</th>
              <th>发起人</th>
              <th>起始时间</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in list" :key="index">
              <td>{{item.id}}</td>
              <td>{{item.img}}</td>
              <td>{{item.title}}</td>
              <td>{{item.area}}</td>
              <td>{{item.name}}</td>
              <td>{{item.time}}</td>
              <td>{{item.type}}</td>
              <td>
                <span @click="del(item.id)">删除</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
      select5: "请选择",
      value: "",
      option5: [
        { text: "请选择", value: "请选择" },
        { text: "已开团", value: "已开团" },
        { text: "未开团", value: "未开团" }
      ],
      select: "请选择省份",
      option: [
        { text: "请选择省份", value: "请选择省份" },
        { text: "广东", value: "广东" },
        { text: "重庆", value: "重庆" },
        { text: "上海", value: "上海" },
        { text: "北京", value: "北京" },
        { text: "江苏", value: "江苏" }
      ],
      select1: "城市",
      option1: ["城市", "深圳", "成都", "苏州", "滁州", "大理", "西藏"],
      select2: "请选择区县",
      option2: [
        { text: "请选择区县", value: "请选择区县" },
        { text: "天长市", value: "天长市" },
        { text: "奉贤区", value: "奉贤区" },
        { text: "黄浦区", value: "黄浦区" }
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      axios({
        url: "/api/lists",
        method: "post"
      }).then(res => {
        this.list = res.data.data;
      });
    },
    area(select5) {
      axios({
        url: "/api/area",
        method: "post",
        data: {
          select5: select5
        }
      }).then(res => {
        this.list = res.data.data;
      });
    },
    del(id) {
      axios({
        url: "/api/del",
        method: "delete",
        data: {
          id: id
        }
      }).then(res => {
        console.log(res);
        this.getList();
      });
    },
    search(value) {
      axios({
        url: "/api/search",
        method: "post",
        data: {
          value: value
        }
      }).then(res => {
        this.list = res.data.data;
      });
    },
    city(data){
      axios({
        url:"/api/getCitys",
        method:"post",
        data:{value:data}
      }).then((res)=>{
        this.list=res.data.data
      })
    }
  }
};
</script>

<style scoped>
.search input{
   height: 40px;
}
.group {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  height: 30px;
  margin-left: 10px;
}
main {
  width: 100%;
  flex: 1;
  overflow-y: auto;
  margin-top: 30px;
}
li select {
  width: 250px;
  height: 40px;
  margin-left: 10px;
}
.search {
  width: 100%;
  display: flex;
  margin-left: 10px;
  margin-top: 10px;
}
.search select {
  width: 140px;
  height: 40px;
}
.search button {
  width: 80px;
  height: 35px;
  margin-left: 30px;
}
.table {
  width: 1300px;
  height: 500px;
  margin-left: 10px;
}
table {
  width: 100%;
  margin-top: 30px;
  border-collapse: collapse;
  border: 1px solid #cccccc;
  text-align: center;
}
table thead tr {
  background: #f8f8f8;
}
table thead tr th {
  height: 30px;
  background: #f8f8f8;
}
table tbody tr td {
  height: 30px;
}
</style>